<template>
  <uni-card>
    <view class="choose" @click="goSelectElevator">
      <view class="input">{{ name }}</view>
      <uni-icons type="arrowright"></uni-icons>
    </view>
  </uni-card>

  <!-- 上传图片 -->
  <uni-card>
    <view v-if="roomImg" class="upload" @click="roomImgs">
      <image style="width: 100%;height: 100%;" mode="heightFix" :src="roomImg"></image>
    </view>
    <view v-else class="upload" @click="roomImgs">
      <view class="photograph">
        <image mode="widthFix" src="../../../../static/image/fault/photo.png"></image>
        <view class="">
          点击拍摄照片
        </view>
      </view>
    </view>
  </uni-card>

  <!-- 备注 -->
  <uni-card>
    <view class="comment">
      <wu-textarea placeholder="故障描述:" maxlength="100" v-model="remark"></wu-textarea>
    </view>
  </uni-card>

  <!-- 标签 -->
  <view class="uni-list">
    <view class="tag" v-for="(item,index) in list_type" :key="index" @click="choice(index)"
          :class="index == faultType ? 'active' : ''">
      <view>{{ item.dictLabel }}</view>
    </view>
  </view>

<!--  <view class="choose" style="border-bottom: none;">-->
<!--    <view class="choose-left">是否需要大修</view>-->
<!--    <switch @change="ChangeSwich" class="heighs" color="#017EFE"/>-->
<!--  </view>-->
  <button type="default" @click="gosubmit">提交</button>
</template>

<script>
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";
import WuTextarea from "@/uni_modules/wu-textarea/components/wu-textarea/wu-textarea.vue";
import {getElevator} from "@/api/iot/elevator";
import {ossUpload} from "@/api/system/oss";
import {dictDataInfo} from "@/api/system/dict/dictData";
import {DictEnum} from "@/enums/dictEnum";
import {reportFault} from "@/api/iot/elevatorRepair";

export default {
  computed: {
    DictEnum() {
      return DictEnum
    }
  },
  components: {WuTextarea, UniCard, UniIcons},
  data() {
    return {
      name: '选择电梯',
      roomImg: '',
      list_type: [],//故障类型  
      faultType: "dd",
      remark: '',
      isOverhaul: 1,//是否需要大修
      elevatorId: '',
    }
  },
  onLoad(e) {
    if (e.elevatorId) {
      this.elevator_name(e.elevatorId)
    }
    this.genre()

  },
  methods: {
    ChangeSwich(e) {
      this.isOverhaul = e.target.value ? 0 : 1
    },
    // 导航返回
    goback() {
      uni.navigateBack({})
    },
    // 导航右边事件
    async gosubmit() {
      if (this.name == '选择电梯' || this.name == '') {
        uni.showToast({
          title: '请添加电梯',
          icon: 'none'
        })
        return
      }
      // if(this.roomImg == ''){
      // 	uni.showToast({
      // 		title: '请上传图片',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      if (this.faultType == 'dd') {
        uni.showToast({
          title: '请选择被困类型',
          icon: 'none'
        })
        return
      }
      // var outsideTask = []
      // for(var i = 0;i < this.list_type.length; i++){
      // 	if(this.list_type[i].selectStatus != false){
      // 		outsideTask.push(this.list_type[i].dictCode)
      // 	}
      // }
      // if(outsideTask.length == 0){
      // 	uni.showToast({
      // 		title: '请选择被困类型',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      // if(this.remark == ''){
      // 	uni.showToast({
      // 		title:'请输入故障描述',
      // 		icon:'none'
      // 	})
      // 	return
      // } 
      console.log(this.isOverhaul)
      let parme = {
        elevatorId: this.elevatorId,
        faultImage: this.roomImg,
        faultType: this.list_type[this.faultType].dictValue,
        faultMessage: this.remark,
        isOverhaul: this.isOverhaul,
      }
      const res = await reportFault(parme)
      uni.switchTab({
        url: "/pages/index/index"
      })
    },
    //上传图片
    async roomImgs() {
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          const tempFilePaths = res.tempFilePaths;
          const ress = await ossUpload(tempFilePaths[0]);
          console.log('ress', ress)
          this.roomImg = ress.url
        }
      })
    },
    //选择电梯
    async elevator_name(elevatorId) {
      const res = await getElevator(elevatorId);
      this.name = res.elevatorName;
      this.elevatorId = res.elevatorId
    },
    //困人类型
    async genre() {
      this.list_type = await dictDataInfo(DictEnum.IOT_FAULT_TYPE)
    },
    choice(ind) {
      console.log(ind)
      this.faultType = ind
      // var city = this.list_type;
      // var selectStatus = !this.list_type[ind].selectStatus;
      // city[ind].selectStatus = selectStatus,
      // this.list_type = city
    },
    // 选择电梯接口调用 elevatorInfo/findCommunityByToken
    goSelectElevator() {
      uni.navigateTo({
        url: '/pages/tabbar/polling/searchResult/searchResult?type=' + 2,
      })

    },

  }

}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

page {
  width: 750rpx;
  background: #EFF2F5;
  overflow: hidden;
}

view {
  font-size: 28rpx;
  line-height: 1.8;

}

.uni-card {
  /* height: 96rpx; */
  background: #FFFFFF;
  border-radius: 16rpx;
  border: none;
  margin: 0 auto;

  margin-top: 20rpx;

}

.choose {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}

.input {
  text-align: left;
}

/* 上传图片 */
.upload {
  height: 196rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  position: relative;
}

.photograph {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translate(-50% -50%);
  margin: 0 auto;
}

.photograph image {
  width: 64rpx;
  height: 52rpx;
  vertical-align: middle;
  margin: 25rpx;
}

.photograph view {

  font-size: 30rpx;
  font-weight: 400;
  color: #989BA6;

}

.upload-img {
  width: 177rpx;
  height: 29rpx;
  font-size: 30rpx;
  text-align: center;
  line-height: 29rpx;
}

.camera {
  margin: 0 auto;
}

/* 标签 */
.uni-tag {
  width: 250rpx;
  height: 56rpx;
  text-align: center;
  line-height: 56rpx;
  display: inline-block;
  margin: 10rpx;
}

.tag {
  padding: 5px 15px;
  background-color: #FFFFFF;
  margin: 20px 0 0 0;
  border-radius: 25px;

  /* width: 50%; */
  /* margin: 0 auto; */

}

.active {
  color: #FFFFFF;
  background-color: #017EFE;
}

.uni-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}


.choose {
  height: 96rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* text-align: center; */
  border-bottom: 1px solid #E2E6EF;
}

.choose-left {
  font-size: 26rpx;
  text-align: left;
  color: #34363D;
}

.choose .heighs {
  /* height: 40rpx; */
  transform: scale(0.7);
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  background-color: transparent;
}

button {
  width: 670rpx;
  height: 52px;
  background: #017EFE;
  box-shadow: 0px 5px 7px 0px rgba(1, 126, 254, 0.2);
  border-radius: 26px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  line-height: 52px;
  margin: 50px auto 34px;
}
</style>
 